<template>
  <div class="advanceSaleReview" style="padding: 10px">
    <dt-search ref="search" :label-width="90"></dt-search>
    <dt-grid ref="table" :page="page" :onFetch="onFetch" />
    <Modal
      v-model="examineFlag"
      :title="examineTitle"
      width="500"
      :footerHide="true"
      @on-cancel="modalCancel">
      <div>
        <div class="detailsBox">
          <p>
            <span>所属城市：</span>
            <em>{{ buCity }}</em>
          </p>
          <p>
            <span>案场名称：</span>
            <em>{{ buName }}</em>
          </p>
          <p>
            <span>产品类型：</span>
            <em>
              {{
                examineDetails.approveStatus &&
                $formatter.switchName('productType', examineDetails.productType)
              }}
            </em>
          </p>
          <p>
            <span>楼栋号：</span>
            <em>{{ examineDetails.buildingNames }}</em>
          </p>
          <p>
            <span>预售证上传时间：</span>
            <em>{{ examineDetails.preUploadDate }}</em>
          </p>
          <p>
            <span>附件资料：</span>
            <em class="downBox">
              <i @click="fujianDown(item)" v-for="(item, index) in examineDetails.imageVOS" :key="index">
                {{ item.imageName }}
              </i>
            </em>
          </p>
          <p>
            <span>提前开售原因：</span>
            <em>{{ examineDetails.reason }}</em>
          </p>
          <p>
            <span>提交审核时间：</span>
            <em>{{ examineDetails.submitTime }}</em>
          </p>
          <p>
            <span>提交人：</span>
            <em>{{ examineDetails.submitName }}</em>
          </p>
          <p>
            <span>
              <i style="color: red" v-if="type == 1">*</i>
              审核结果：
            </span>
            <em v-if="type == '0'" style="color: red">
              {{ $formatter.switchName('buildingApproveStatus', examineDetails.approveStatus) }}
            </em>
            <em v-if="type == '1'">
              <Select v-model="examinVal" style="width: 200px" placeholder="请审核">
                <Option value="1">同意</Option>
                <Option value="2">驳回</Option>
              </Select>
            </em>
          </p>
          <p v-if="approveStatusFlag != '0' || type == '1'">
            <span>审核内容：</span>
            <em v-if="type == '0'">{{ examineDetails.content }}</em>
            <em v-if="type == '1'">
              <Input
                v-model="examinRemarks"
                type="textarea"
                style="width: 200px"
                :rows="4"
                :maxlength="300"
                placeholder="请输入审核内容" />
            </em>
          </p>
          <p v-if="type == '0' && approveStatusFlag != '0'">
            <span>审核时间：</span>
            <em>{{ examineDetails.approveTime }}</em>
          </p>
          <p v-if="type == '0' && approveStatusFlag != '0'">
            <span>审核人：</span>
            <em>{{ examineDetails.approveName }}</em>
          </p>
        </div>
        <div class="examineBtn">
          <Button @click="modalCancel">关闭</Button>
          <Button v-if="type == '1'" type="primary" :loading="auditing" @click="approvePreSale">确定</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
  import toolApi from '@/biz/base/tool'
  import buildingMgr from '@/biz/advanceSaleReview/advanceSaleReview'
  import Column from './opt/adColumns'
  import SearchOpt from './opt/adSearch'
  export default {
    data() {
      return {
        auditing: false,
        examineTitle: '审核',
        examineFlag: false,
        examineDetails: {},
        type: 0,
        buName: '',
        buCity: '',
        examinVal: '',
        examinRemarks: '',
        recId: '',
        approveStatusFlag: '',

        cityAttrSort: [],

        formValidate: {
          orgIds: [],
          cityCode: '',
          housesName: '',
          startTime: '',
          endTime: '',
          approveStatus: ''
        },
        page: {
          total: 0
        }
      }
    },
    mounted() {
      this.$refs.table.init(this, new Column(this), {
        approveStatus: this.$route.params.status
      })
      this.$refs.search.init(this.$refs.table, new SearchOpt(this))
      this.$refs.table.fetch()
    },
    methods: {
      onFetch(data) {
        this.formValidate = data
        this.formValidate.cityCode = data.city ? data.city[1] : ''
        delete this.formValidate.city
        return buildingMgr.preSaleRecList(this.formValidate).then((res) => {
          this.page.total = res.total
          return res.list
        })
      },

      fujianDown(val) {
        toolApi.downloadFile(val.imageURL, val.imageName)
      },

      modalCancel() {
        this.examinVal = ''
        this.examinRemarks = ''
        this.examineFlag = false
      },
      // 审核确定
      approvePreSale() {
        if (!this.examinVal) {
          this.$Message.warning('请选择审核结果。')
          return false
        }
        this.auditing = true
        let params = {
          approveStatus: this.examinVal,
          content: this.examinRemarks,
          recId: this.recId
        }

        buildingMgr
          .approvePreSale(params)
          .then((res) => {
            this.auditing = false
            this.$Message.success('审核成功')
            // this.advanceSaleReviewList();
            this.$refs.table.fetch()
            this.modalCancel()
          })
          .catch(() => {
            this.auditing = false
          })
      },

      getPreSaleRec(val) {
        console.log(val, 'vvvvvvvvvvvvvvv')
        this.approveStatusFlag = val[0].approveStatus
        this.recId = val[0].recId
        this.buName = val[0].housesName
        this.buCity = val[0].city

        this.type = val[1]
        this.examineFlag = true
        let params = {
          recId: val[0].recId
        }

        buildingMgr.getPreSaleRec(params).then((res) => {
          this.examineDetails = res
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .channel-audit {
    padding: 20px;
  }

  .searchBox {
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .detailsBox {
    width: 100%;
    overflow: hidden;

    p {
      float: left;
      min-width: 50%;
      line-height: 2;
      display: flex;
      flex-direction: row;
      margin-top: 10px;

      span {
        display: inline-block;
        width: 150px;
        text-align: right;
      }

      em {
        font-style: normal;
        flex: 1;
      }
    }
  }

  .examineBtn {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 30px 100px 10px;
  }

  .downBox {
    > i {
      color: #2d8cf0;
      display: block;
      font-style: normal;
      cursor: pointer;
    }
  }
</style>
